<template>
  <div class="app-container calendar-list-container">
    <div class="apply-query">
      <el-row class="filter-query">
        <el-col><span>{{$t('overallReport.queryCondition')}}</span></el-col>
      </el-row>
      <el-form :inline="true" :model="listQuery" style="padding: 0 20px">
        <el-row style="padding-bottom: 10px">
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">{{$t('businessObjectives.country')}}</div>
              <dict-select v-model="listQuery.country" code="country" :clearable="true" @change="setBg"></dict-select>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">Category</div>
              <el-select clearable v-model="listQuery.bg" @change="changeBg" :placeholder="$t('placeholder.choose')">
                <el-option v-for="item in bgList" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">Account</div>
              <el-select clearable multiple collapse-tags v-model="listQuery.bu" :clearable="true" @change="changeBu" :placeholder="$t('placeholder.choose')">
                <el-option v-for="item in buList" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">{{$t('projectRevenue.cooReport.clientName')}}</div>
              <!--<el-autocomplete style="width: 100%" clearable v-model="listQuery.clientName" :fetch-suggestions="getCustomerList" :placeholder="$t('placeholder.content')" @select="selectCustomer"></el-autocomplete>-->
              <el-select v-model="listQuery.customerNo" filterable clearable remote reserve-keyword collapse-tags :placeholder="$t('placeholder.content')" :remote-method="queryCustomer" :loading="loading"  :no-data-text="$t('public.noData')" :loading-text="$t('public.loading')"> <!--请输入客户简称-->
                <el-option v-for="item in optionsCustomer" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">Year</div>
              <dict-select v-model="listQuery.year" code="year" :clearable="true"></dict-select>
            </div>
          </el-col>
          <el-col :span="4" style="margin-top: 32px">
            <div type="primary" class="yt-btn yt-btn-ys" @click="handleFilter">{{$t('button.query')}}</div>
            <div type="primary" class="yt-btn yt-ml8" @click="reset">{{$t('button.reset')}}</div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="yt-data-list" style="padding-bottom: 20px;">
      <div class="yt-list-contentg" style="position: relative;">
        <span style="border-bottom: 3px solid #6dcaa8; line-height: 46px; display: inline-block;">{{$t('overallReport.overallReportList')}}--Overall</span>
      </div>
      <div class="yt-list-box" v-loading="listLoading" :element-loading-text="$t('overallReport.loading')" element-loading-spinner="el-icon-loading">
        <div class="yt-list-content">
          <div class="list-operation">
            <div class="yt-btn yt-btn-ys" type="primary" @click="handleRemit">{{$t('button.export')}}</div>
            <div class="yt-btn yt-ml8" type="primary" @click="setUp('buOne')">{{$t('button.sets')}}</div>
          </div>
          <el-table v-if="displayBlockNameListFla['buOne'] === 'buOne'" :row-style="changeCss" :data="list" :empty-text="$t('placeholder.emptyText')" border class="yt-table" style="width: 100%" max-height="600">
            <el-table-column align="center" :label="$t('overallReport.cooReportOne.index')" prop="index" min-width="60"></el-table-column>
            <el-table-column align="center" label="Category" prop="bg" v-if="buOne['bg']" min-width="100"/>
            <el-table-column align="center" label="Account" prop="bu" v-if="buOne['bu']" min-width="130"/>
            <el-table-column align="center" label="Year" prop="year" v-if="buOne['year']" min-width="100"></el-table-column>
            <el-table-column align="center" :label="$t('overallReport.cooReportOne.recognizedIncome')" v-if="buOne['recognizedIncome']" min-width="100">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.recognizedIncome }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('overallReport.cooReportOne.recognizedCost')" prop="recognizedCost" v-if="buOne['recognizedCost']" min-width="100">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.recognizedCost }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('overallReport.cooReportOne.contractGrossProfit4Year')" prop="contractGrossProfit4Year" v-if="buOne['contractGrossProfit4Year']" min-width="100">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.contractGrossProfit4Year }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('overallReport.cooReportOne.contractGrossProfit4YearPercentage')" prop="contractGrossProfit4YearPercentage" v-if="buOne['contractGrossProfit4YearPercentage']" min-width="100"/>
            <el-table-column align="center" :label="$t('overallReport.cooReportOne.contractIncomeAfterYear')" v-if="buOne['contractIncomeAfterYear']" min-width="100">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.contractIncomeAfterYear }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('overallReport.cooReportOne.contractCostAfterYear')" v-if="buOne['contractCostAfterYear']" min-width="100">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.contractCostAfterYear }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('overallReport.cooReportOne.contractGrossProfitAfterYear')" v-if="buOne['contractGrossProfitAfterYear']" min-width="100">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.contractGrossProfitAfterYear}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('overallReport.cooReportOne.contractGrossProfitAfterYearPercentage')" prop="contractGrossProfit" v-if="buOne['contractGrossProfitAfterYearPercentage']" min-width="100">
              <template slot-scope="scope">
                <div >{{scope.row.contractGrossProfitAfterYearPercentage}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('overallReport.cooReportOne.pastYearIncome')" prop="pastYearIncome" v-if="buOne['pastYearIncome']" min-width="100">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.pastYearIncome}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('overallReport.cooReportOne.pastYearCost')" v-if="buOne['pastYearCost']" min-width="100">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.pastYearCost}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('overallReport.cooReportOne.contractGrossProfitPastYear')" v-if="buOne['contractGrossProfitPastYear']" min-width="100">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.contractGrossProfitPastYear}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('overallReport.cooReportOne.contractGrossProfitPastYearPercentage')" prop="contractGrossProfitPastYearPercentage" v-if="buOne['contractGrossProfitPastYearPercentage']" min-width="100"/>
            <el-table-column align="center" :label="$t('overallReport.cooReportOne.contractIncome')" prop="contractIncome" v-if="buOne['contractIncome']" min-width="100">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.contractIncome}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('overallReport.cooReportOne.contractCost')" prop="contractCost" v-if="buOne['contractCost']" min-width="100">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.contractCost}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('overallReport.cooReportOne.contractGrossProfit')" v-if="buOne['contractGrossProfit']" min-width="100">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.contractGrossProfit}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('overallReport.cooReportOne.contractGrossProfitPercentage')" v-if="buOne['contractGrossProfitPercentage']" min-width="100">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.contractGrossProfitPercentage}}</div>
              </template>
            </el-table-column>
          </el-table>
          <div v-if="displayBlockNameListFla['buOne'] === '0'">
            <el-tag type="warning"><i class="el-icon-warning"></i> {{$t('overallReport.set')}}</el-tag>
          </div>
        </div>

        <!-- 报表2  cooReportTwo-->
        <div class="yt-list-content">
          <div class="list-operation">
            <div class="yt-btn yt-ml8" type="primary" @click="setUp('buTwo')">{{$t('button.sets')}}</div>
          </div>
          <el-table v-if="displayBlockNameListFla['buTwo'] === 'buTwo'" :data="list" :empty-text="$t('placeholder.emptyText')" :row-style="changeCss" border class="yt-table" style="width: 100%" max-height="600">
            <el-table-column align="center" :label="$t('overallReport.cooReportTwo.index')" prop="index" min-width="60"></el-table-column>
            <el-table-column align="center" label="Category" prop="bg" v-if="buTwo['bg']" min-width="100"/>
            <el-table-column align="center" label="Account" prop="bu" v-if="buTwo['bu']" min-width="130"/>
            <el-table-column align="center" label="Year" prop="year" v-if="buTwo['year']" min-width="100"></el-table-column>
            <el-table-column align="center" :label="$t('overallReport.cooReportTwo.recognizedIncome')" v-if="buTwo['recognizedIncome']" min-width="100">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.recognizedIncome }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('overallReport.cooReportTwo.completionIncome4Year')" prop="completionIncome4Year" v-if="buTwo['completionIncome4Year']" min-width="100">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.completionIncome4Year }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('overallReport.cooReportTwo.completionCost4Year')" prop="completionCost4Year" v-if="buTwo['completionCost4Year']" min-width="100">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.completionCost4Year }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('overallReport.cooReportTwo.completionProfit4Year')" prop="completionProfit4Year" v-if="buTwo['completionProfit4Year']" min-width="100">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.completionProfit4Year }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('overallReport.cooReportTwo.completionPercentage4Year')" prop="completionPercentage4Year" v-if="buTwo['completionPercentage4Year']" min-width="100"/>
            <el-table-column align="center" :label="$t('overallReport.cooReportTwo.completionIncomeCount')" prop="completionIncomeCount" v-if="buTwo['completionIncomeCount']" min-width="100">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.completionIncomeCount }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('overallReport.cooReportTwo.completionCostCount')" prop="completionCostCount" v-if="buTwo['completionCostCount']" min-width="100">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.completionCostCount }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('overallReport.cooReportTwo.sumIdentifyIncome')" prop="sumIdentifyIncome" v-if="buTwo['sumIdentifyIncome']" min-width="100">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.sumIdentifyIncome }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('overallReport.cooReportTwo.sumIdentifyCost')" prop="sumIdentifyCost" v-if="buTwo['sumIdentifyCost']" min-width="100">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.sumIdentifyCost }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('overallReport.cooReportTwo.sumReceivablesFunds')" prop="sumReceivablesFunds" v-if="buTwo['sumReceivablesFunds']" min-width="100">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.sumReceivablesFunds }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('overallReport.cooReportTwo.sumPaymentFunds')" prop="sumPaymentFunds" v-if="buTwo['sumPaymentFunds']" min-width="100">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.sumPaymentFunds }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('overallReport.cooReportTwo.notReceiveAmount')" prop="notReceiveAmount" v-if="buTwo['notReceiveAmount']" min-width="100">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.notReceiveAmount }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('overallReport.cooReportTwo.notPaymentAmount')" prop="notPaymentAmount" v-if="buTwo['notPaymentAmount']" min-width="100">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.notPaymentAmount }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('overallReport.cooReportTwo.sumReceivableRequestFunds')" prop="sumReceivableRequestFunds" v-if="buTwo['sumReceivableRequestFunds']" min-width="100">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.sumReceivableRequestFunds }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('overallReport.cooReportTwo.sumPayableRequestFunds')" prop="sumPayableRequestFunds" v-if="buTwo['sumPayableRequestFunds']" min-width="100">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.sumPayableRequestFunds }}</div>
              </template>
            </el-table-column>

          </el-table>
          <div v-if="displayBlockNameListFla['buTwo'] === '0'">
            <el-tag type="warning"><i class="el-icon-warning"></i> {{$t('overallReport.set')}}</el-tag>
          </div>
        </div>

        <!-- 报表3  cooReportThree-->
        <div class="yt-list-content">
          <div class="list-operation">
            <div class="yt-btn yt-ml8" type="primary" @click="setUp('buThree')">{{$t('button.sets')}}</div>
          </div>
          <el-table v-if="displayBlockNameListFla['buThree'] === 'buThree'" :row-style="changeCss"  :data="buCostCount" :empty-text="$t('placeholder.emptyText')" border class="yt-table" style="width: 100%" max-height="600">
            <el-table-column prop="index" align="center" :label="$t('overallReport.cooReportThree.index')" min-width="60"/>
            <el-table-column align="center" label="Category" prop="bg" v-if="buThree['bg']" min-width="100"/>
            <el-table-column align="center" label="Account" prop="bu" v-if="buThree['bu']" min-width="130"/>
            <el-table-column align="center" :label="$t('overallReport.cooReportThree.completionIncome4Year')" prop="completionIncome4Year" v-if="buThree['completionIncome4Year']" min-width="100">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.completionIncome4Year }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('overallReport.cooReportThree.completionCost4Year')" v-if="buThree['completionCost4Year']" min-width="100">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.completionCost4Year }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('overallReport.cooReportThree.projectLaborCost')" prop="projectLaborCost" v-if="buThree['projectLaborCost']" min-width="100">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.projectLaborCost }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('overallReport.cooReportThree.manageLaborCost')" prop="manageLaborCost" v-if="buThree['manageLaborCost']" min-width="100">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.manageLaborCost }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('overallReport.cooReportThree.businessCost')" prop="businessCost" v-if="buThree['businessCost']" min-width="100">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.businessCost }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('overallReport.cooReportThree.completionProfit4Year')" v-if="buThree['completionProfit4Year']" min-width="100">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.completionProfit4Year }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('overallReport.cooReportThree.completionProfitPercentage4Year')" v-if="buThree['completionProfitPercentage4Year']" min-width="100">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.completionProfitPercentage4Year }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('overallReport.cooReportThree.costTotal')" v-if="buThree['costTotal']" min-width="100">
              <template slot-scope="scope">
                <div  v-format="'#,##0'">{{scope.row.costTotal}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('overallReport.cooReportThree.costTotalPercentage')" prop="costTotalPercentage" v-if="buThree['costTotalPercentage']" min-width="100"/>
            <el-table-column align="center" :label="$t('overallReport.cooReportThree.manageCost')" prop="manageCost" v-if="buThree['manageCost']" min-width="100">
              <template slot-scope="scope">
                <div  v-format="'#,##0'">{{scope.row.manageCost}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('overallReport.cooReportThree.manageCostAmortization')" v-if="buThree['manageCostAmortization']" min-width="100">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.manageCostAmortization}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('overallReport.cooReportThree.amortization')" v-if="buThree['amortization']" min-width="100">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.amortization}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('overallReport.cooReportThree.hQAmortization')" prop="hQAmortization" v-if="buThree['contractGrossProfitAfterYearPercentage']" min-width="100">
              <template slot-scope="scope">
                <div  v-format="'#,##0'">{{scope.row.hQAmortization}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('overallReport.cooReportThree.operatingProfit')" prop="operatingProfit" v-if="buThree['operatingProfit']" min-width="100">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.operatingProfit}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('overallReport.cooReportThree.operatingProfitPercentage')" prop="operatingProfitPercentage" v-if="buThree['operatingProfitPercentage']" min-width="100"/>
          </el-table>
          <div v-if="displayBlockNameListFla['buThree'] === '0'">
            <el-tag type="warning"><i class="el-icon-warning"></i> {{$t('overallReport.set')}}</el-tag>
          </div>
        </div>
      </div>

      <el-dialog :title="$t('overallReport.setShowColumn')" :visible.sync="TableTitleVisible">
        <yt-table-title :blockNameCode="blockNameCode" :displayBlockNameList ="displayBlockNameList" @cancel="cancel"></yt-table-title>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import { selectBu, selectBg, listbgAndbu } from '@/api/bu/index';
  import customerReq from '@/api/customer';
  import { getDataOverall, queryDisplayBlock } from '@/api/pmoReport/projectRevenue';
  import YtTableTitle from '@/components/yt-table-title/index';
  import { getBuAndBg } from '@/api/businessTarget/index';
  import dictSelect from '@/components/Dict/dictValueSelect';

  export default {
    name: 'overallReport',
    components: { YtTableTitle, dictSelect, 'dict-select': () => import('@/components/Dict/dictValueSelect') },
    data() {
      return {
        loading: false,
        listLoading: false,
        TableTitleVisible: false,
        optionsCustomer: [],
        displayBlockNameListFla: {},
        displayBlockNameList: [],
        buOne: {},
        buTwo: {},
        buThree: {},
        blockNameCode: '',
        listQuery: {
          page: 1,
          limit: 10,
          bu: [],
          bg: '',
          clientName: '',
          customerNo: '',
          year: '',
          client: '',
          country: ''
        },
        list: [],
        buCostCount: [],
        projectList: [],
        buList: [],
        bgList: [],
        total: 0
      };
    },
    mounted() {
      this.getQuery()
      this.changeBg(this.listQuery.bg)
      this.changeBu(this.listQuery.bu)
      this.getBuTable();
      if (this.listQuery.bu.length > 0 || this.listQuery.bg !== '' || this.listQuery.clientName !== '' || this.listQuery.year !== '' || this.listQuery.customerNo !== '') {
        this.getList();
      }
    },
    methods: {
      queryCustomer(query) {
        this.loading = true;
        customerReq.pageClient({ clientName: query }).then(res => {
          this.loading = false;
          this.optionsCustomer = res.data.rows.map(item => ({ value: item.customerNo, label: item.customerShortName }));
        });
      },
      changeCss({ row }) {
        if (!row.index) {
          return 'background:#f0f2f5;color:#ff9900'
        }
      },
      getQuery() {
        const overallReportListQuery = window.sessionStorage.getItem('overallReportListQuery');
        if (overallReportListQuery) {
          this.listQuery = JSON.parse(overallReportListQuery);
        }
      },
      getMixinColumn(data, name) {
        queryDisplayBlock(data).then(res => {
          if (res.status === 200) {
            if (name === 'buOne') {
              this.buOne = {}
              this.displayBlockNameList = res.data
              for (const i in this.displayBlockNameList) {
                this.buOne[this.displayBlockNameList[i]] = true
              }
              if (res.data.length > 0) {
                this.displayBlockNameListFla.buOne = 'buOne'
              } else {
                this.displayBlockNameListFla.buOne = '0'
              }
            } else if (name === 'buTwo') {
              this.buTwo = {}
              this.displayBlockNameList = res.data
              for (const i in this.displayBlockNameList) {
                this.buTwo[this.displayBlockNameList[i]] = true
              }
              if (res.data.length > 0) {
                this.displayBlockNameListFla.buTwo = 'buTwo'
              } else {
                this.displayBlockNameListFla.buTwo = '0'
              }
            } else if (name === 'buThree') {
              this.buThree = {}
              this.displayBlockNameList = res.data
              for (const i in this.displayBlockNameList) {
                this.buThree[this.displayBlockNameList[i]] = true
              }
              if (res.data.length > 0) {
                this.displayBlockNameListFla.buThree = 'buThree'
              } else {
                this.displayBlockNameListFla.buThree = '0'
              }
            }
          }
        })
      },
      getMixinDialogColumn(data, name) {
        console.log(data, name)
        queryDisplayBlock(data).then(res => {
          if (res.status === 200) {
            if (name === 'buOne') {
              this.buOne = {}
              this.displayBlockNameList = res.data
              for (const i in this.displayBlockNameList) {
                this.buOne[this.displayBlockNameList[i]] = true
              }
              if (res.data.length > 0) {
                this.displayBlockNameListFla.buOne = 'buOne'
              } else {
                this.displayBlockNameListFla.buOne = '0'
              }
              this.TableTitleVisible = true
              console.log(this.buOne, '1111')
            } else if (name === 'buTwo') {
              this.buTwo = {}
              this.displayBlockNameList = res.data
              for (const i in this.displayBlockNameList) {
                this.buTwo[this.displayBlockNameList[i]] = true
              }
              if (res.data.length > 0) {
                this.displayBlockNameListFla.buTwo = 'buTwo'
              } else {
                this.displayBlockNameListFla.buTwo = '0'
              }
              this.TableTitleVisible = true
              console.log(this.buTwo, '2222')
            } else if (name === 'buThree') {
              this.buThree = {}
              this.displayBlockNameList = res.data
              for (const i in this.displayBlockNameList) {
                this.buThree[this.displayBlockNameList[i]] = true
              }
              if (res.data.length > 0) {
                this.displayBlockNameListFla.buThree = 'buThree'
              } else {
                this.displayBlockNameListFla.buThree = '0'
              }
              this.TableTitleVisible = true
              console.log(this.buThree, '33333')
            } else if (name === 'projectOne') {
              this.projectOne = {}
              this.displayBlockNameList = res.data
              for (const i in this.displayBlockNameList) {
                this.projectOne[this.displayBlockNameList[i]] = true
              }
              if (res.data.length > 0) {
                this.displayBlockNameListFla.projectOne = 'projectOne'
              } else {
                this.displayBlockNameListFla.projectOne = '0'
              }
              this.TableTitleVisible = true
              console.log(this.projectOne, 'projectOne1111')
            } else if (name === 'projectTwo') {
              this.projectTwo = {}
              this.displayBlockNameList = res.data
              for (const i in this.displayBlockNameList) {
                this.projectTwo[this.displayBlockNameList[i]] = true
              }
              if (res.data.length > 0) {
                this.displayBlockNameListFla.projectTwo = 'projectTwo'
              } else {
                this.displayBlockNameListFla.projectTwo = '0'
              }
              this.TableTitleVisible = true
              console.log(this.projectTwo, 'projectTwo2222')
            } else if (name === 'projectThree') {
              this.projectThree = {}
              this.displayBlockNameList = res.data
              for (const i in this.displayBlockNameList) {
                this.projectThree[this.displayBlockNameList[i]] = true
              }
              if (res.data.length > 0) {
                this.displayBlockNameListFla.projectThree = 'projectThree'
              } else {
                this.displayBlockNameListFla.projectThree = '0'
              }
              this.TableTitleVisible = true
              console.log(this.projectThree, 'projectThree333')
            } else if (name === 'projectFour') {
              this.projectFour = {}
              this.displayBlockNameList = res.data
              for (const i in this.displayBlockNameList) {
                this.projectFour[this.displayBlockNameList[i]] = true
              }
              if (res.data.length > 0) {
                this.displayBlockNameListFla.projectFour = 'projectFour'
              } else {
                this.displayBlockNameListFla.projectFour = '0'
              }
              this.TableTitleVisible = true
              console.log(this.projectFour, 'projectFour4444')
            }
          }
        })
      },
      // 获取初始的栏位
      getColumn(val) {
        this.blockNameCode = val
        const data = {
          tableName: this.blockNameCode,
          userId: this.$store.getters.info.id
        }
        this.getMixinColumn(data, val)
      },
      // 获取弹框的栏位
      setUp(val) {
        this.blockNameCode = val
        // 设置
        const data = {
          tableName: this.blockNameCode,
          userId: this.$store.getters.info.id
        }
        this.getMixinDialogColumn(data, val)
      },
      getData() {
        if (!this.listQuery.year) {
          this.$message.error(this.$t('placeholder.enterYear'));
          return
        }

        this.listLoading = true
        getDataOverall(this.listQuery).then(res => {
          if (res.status === 201) {
            this.$message.error(res.message);
            this.loading = false
          } else {
            try {
              this.list = []
              this.buCostCount = []
              // 拼接已返回的数据
              for (let i = 0; i < res.data.list.length; i++) {
                this.list = this.list.concat(res.data.list[i].listBG, res.data.list[i].countBG)
              }

              if (res.data.buCostCount) {
                this.buCostCount = res.data.buCostCount;
              }
              if (res.data.allCount) {
                this.list.push(res.data.allCount)
                this.buCostCount.push(res.data.allCount)
              }
              let r = 1;
              for (let i = 0; i < this.list.length; i++) {
                if (this.list[i].year) {
                  this.list[i].index = r;
                  r++;
                }
              }
              r = 1;
              for (let i = 0; i < this.buCostCount.length; i++) {
                if (this.buCostCount[i].bg) {
                  this.buCostCount[i].index = r;
                  r++;
                }
              }
              this.listLoading = false
            } catch (e) {
              this.listLoading = false
            }
          }
        });
      },
      getList() {
        this.getData();
      },
      getBuTable() {
        this.getColumn('buOne');
        this.getColumn('buTwo');
        this.getColumn('buThree');
      },
      cancel(val) {
        if (val) {
          this.getColumn(this.blockNameCode);
        }
        this.TableTitleVisible = false
      },
      handleRemit() {
        // 汇出
        // const str = '?page=' + this.listQuery.page + '&limit=' + this.listQuery.limit + '&companyType=' + this.listQuery.companyType + '&projectStatus=' + this.listQuery.projectStatus + '&systemType=' + this.listQuery.systemType + '&epcType=' + this.listQuery.epcType + '&vendorPoNo=' + this.listQuery.vendorPoNo + '&poNo=' + this.listQuery.poNo + '&hasPoNo=' + this.listQuery.hasPoNo + '&projectNo=' + this.listQuery.projectNo + '&projectYear=' + this.listQuery.projectYear + '&customerName=' + this.listQuery.customerName + '&erpReceivablesNo=' + this.listQuery.erpReceivablesNo + '&erpPayableNo=' + this.listQuery.erpPayableNo + '&vendorName=' + this.listQuery.vendorName + '&hasRealityFinishDate=' + this.listQuery.hasRealityFinishDate + '&realityFinishDate=' + this.listQuery.realityFinishDate + '&hasInvoiceDate=' + this.listQuery.hasInvoiceDate + '&invoiceDate=' + this.listQuery.invoiceDate + '&vendorInvoiceDate=' + this.listQuery.vendorInvoiceDate + '&hasVendorInvoiceDate=' + this.listQuery.hasVendorInvoiceDate + '&createBy=' + this.$store.getters.info.id;
        // const a = document.createElement('a');
        // const href = '/api/admin/excel/excelProjectProgress/' + str;
        // a.download = Date.now();
        // a.href = href;
        // a.click();
        const str = '?bg=' + this.listQuery.bg + '&bu=' + this.listQuery.bu + '&customerNo=' + this.listQuery.customerNo + '&year=' + this.listQuery.year + '&userId=' + this.$store.getters.info.id;

        const a = document.createElement('a');
        const href = '/api/admin/excel/exportProjectIncomeReportByOverall' + str;
        a.download = Date.now();
        a.href = href;
        a.click();
        console.log('汇出')
      },
      selectCustomer(item) {
        this.listQuery.customerNo = item.customerNo;
      },
      getCustomerList(queryString, cb) {
        customerReq.pageClient({ clientName: queryString }).then(res => {
          const customerList = res.data.rows;
          if (res.data.rows.length === 0) {
            this.client = ''
          }
          for (let i = 0; i < customerList.length; i++) {
            customerList[i].value = customerList[i].customerShortName;
          }
          cb(customerList);
        });
      },
      setBg(country) {
        this.listQuery.bu = []
        this.listQuery.bg = ''
        if (country) {
          getBuAndBg(country, '').then(res => {
            this.bgList = res.data.bgList;
            this.buList = res.data.buList;
          });
        } else {
          this.getBu()
          this.getBg()
        }
      },
      getBu() {
        selectBu().then(res => {
          this.buList = res.data;
        });
      },
      getBg() {
        selectBg().then(res => {
          this.bgList = res.data;
        });
      },
      changeBu(val) {
        // 联动bg
        if (val.length === 0) {
          this.getBg()
        } else {
          const srt = val.join(',');
          listbgAndbu({ bu: srt, bg: '' }).then(res => {
            this.bgList = res.data;
          });
        }
      },
      changeBg(val) {
        // 联动bu
        if (val === '') {
          this.getBu()
        } else {
          listbgAndbu({ bu: '', bg: val }).then(res => {
            this.buList = res.data;
          });
        }
      },
      handleFilter() {
        this.getList();
      },
      reset() {
        this.listQuery = {
          page: 1,
          limit: 10,
          bu: [],
          bg: '',
          clientName: '',
          year: '',
          client: '',
          country: ''
        };
        this.getList();
      },
      handleSizeChange(val) {
        this.listQuery.limit = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.listQuery.page = val;
        this.getList();
      }
    },
    beforeDestroy() {
      window.sessionStorage.setItem('overallReportListQuery', JSON.stringify(this.listQuery))
    }
  };
</script>
<style scoped>
</style>
